﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Pink Blog</title>
    <link rel="stylesheet" href="styles/styles.css">
</head>

<body class="container">
    <header class="row global-header">
        <h1 class="span7">
            <a href="#"><img src="images/sample-logo.png" alt="Sample Logo" /></a>
        </h1>

        <form class="span3 form-horizontal">
            <dl>
                <dt><label for="label-name">Name:</label></dt>
                <dd><input type="text" id="label-name" /></dd>
            </dl>

            <dl>
                <dt><label for="label-password">Password:</label></dt>
                <dd><input type="password" id="label-password" /></dd>
            </dl>

            <input type="submit" class="btn" value="Register" />
        </form>
    </header>

    <nav>
        <ul class="menu-horizontal">
            <li><a href="#">Home</a></li>

            <li>
                <a href="#">Presentations</a>

                <ul>
                    <li><a href="#" class="active">Intro CSS Styling Course</a></li>
                    <li><a href="#">CSS Overview</a></li>
                    <li><a href="#">CSS Presentation</a></li>
                    <li><a href="#">CSS Display</a></li>
                    <li><a href="#">CSS Layout</a></li>
                    <li><a href="#">SASS</a></li>
                    <li><a href="#">LESS</a></li>
                </ul>
            </li>

            <li><a href="#">Videos</a></li>
            <li><a href="#">Trainers</a></li>
            <li><a href="#">Contacts</a></li>
        </ul>
    </nav>

    <div class="row">
        <section class="span7">
            <article class="box">
                <h1>Lorem ipsum dolor sit amet</h1>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin egestas, dui sed cursus placerat, felis metus sollicitudin nunc, nec venenatis augue tellus vitae nisl. Quisque ut venenatis est. Vestibulum non dolor nec sapien imperdiet semper nec quis massa. Phasellus ultrices vestibulum rutrum. Vestibulum auctor felis eget ipsum semper vulputate. Sed congue, metus sit amet tempus pretium, nunc sapien pellentesque elit, ut porttitor eros orci nec arcu. Nunc lobortis risus eget eros viverra dapibus.</p>

                <footer>
                    <p>
                        published by <a href="#">Doncho Minkov</a> on
                        <time datetime="1970-01-01">
                            <span class="code">08-jan-2013</span> at <span class="code">14:51</span>
                        </time>
                    </p>
                </footer>
            </article>

            <article class="box">
                <h1>Vestibulum ante ipsum primis</h1>

                <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget tincidunt velit. Cras sed lectus mauris. Vivamus massa lacus, laoreet nec sollicitudin eu, pharetra sed elit. Aenean quis enim dui, sed mollis sapien. Duis vel eros sapien, sed blandit magna. Praesent a dolor leo, a gravida lectus. Fusce non aliquam nibh. Aenean nisl dui, faucibus consequat fermentum at, rutrum congue urna. Ut fringilla tempor risus dictum aliquam. Donec congue sapien et massa sagittis eget pharetra risus sollicitudin. Vestibulum urna nunc, feugiat sed tincidunt et, fringilla non nisi. Mauris neque tellus, lobortis a vehicula eget, volutpat id erat. Donec rutrum consectetur malesuada. Curabitur mollis orci at sapien tristique ac mattis nulla sollicitudin.</p>

                <footer>
                    <p>
                        published by <a href="#">Doncho Minkov</a> on
                        <time datetime="1970-01-01">
                            <span class="code">08-jan-2013</span> at <span class="code">14:51</span>
                        </time>
                    </p>
                </footer>
            </article>

            <article class="box">
                <h1>Nullam ullamcorper dolor sed enim venenatis aliquet</h1>

                <p>Nullam ullamcorper dolor sed enim venenatis aliquet. Aenean magna magna, consectetur vel gravida at, gravida ac eros. Donec tincidunt iaculis diam, sit amet aliquam libero fermentum non. Donec at lectus at eros interdum lobortis nec sed massa. Sed nec hendrerit magna. Nunc nec vestibulum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque rutrum neque orci, quis dapibus justo. Sed id turpis a purus luctus dictum eget vitae tortor. Maecenas eu nunc in nisi interdum eleifend non sed ante. Integer sit amet rutrum magna. Maecenas sed blandit quam.</p>

                <footer>
                    <p>
                        published by <a href="#">Doncho Minkov</a> on
                        <time datetime="1970-01-01">
                            <span class="code">08-jan-2013</span> at <span class="code">14:51</span>
                        </time>
                    </p>
                </footer>
            </article>
        </section>

        <aside class="span3">
            <section class="box">
                <h2>Widget</h2>

                <p>Duis vel eros sapien, sed blandit magna. <a href="#">Praesent</a> a dolor leo, a gravida <strong>lectus</strong>. Fusce non aliquam nibh. Aenean nisl dui, faucibus consequat fermentum at, rutrum congue urna.</p>
            </section>

            <section class="box">
                <h2>Widget</h2>

                <ul class="styled">
                    <li>Widget Item</li>
                    <li>Widget Item</li>
                    <li>Widget Item</li>
                    <li>Widget Item</li>
                </ul>
            </section>

            <section class="box">
                <h2>Widget</h2>

                <p>Duis vel eros sapien, sed blandit magna. <a href="#">Praesent</a> a dolor leo, a gravida <strong>lectus</strong>. Fusce non aliquam nibh. <em>Aenean nisl dui</em>, faucibus consequat fermentum at, rutrum congue urna.</p>
            </section>
        </aside>
    </div>

    <footer class="global-footer">
        <p>Telerik Software Academy</p>
    </footer>
</body>
</html>